import React, { FC, useState } from "react";
import { Space, Row, Col, Statistic } from 'antd'
import "./option.css"
import {CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons';

const Option: FC<{}> = (props) => {

  const [show, setShow] = useState(false)

  return (
    <div>
      <Space className="toolbar" onClick={()=>{setShow(!show)}}>
        <span>盛今大厦3室1厅 {show? <CaretDownOutlined />: <CaretRightOutlined />}</span>
      </Space>
      
      {show?  <div className="message" >
        <span className="title">房源信息</span>
        <div className="info" >
       `   <Row gutter={16}>
            <Col span={12}>
              <Statistic title="价格" value={1690} suffix="/月"/>
            </Col>
            <Col span={12}>
              <Statistic title="面积" value={97} suffix="m2" />
            </Col>
            <Col span={12}>
              <Statistic title="楼层" value={2} suffix="/6层"/>
            </Col>
            <Col span={12}>
              <Statistic title="朝向" value={'南'} />
            </Col>
            <Col span={12}>
              <Statistic title="模型" value={'板楼'} />
            </Col>
            <Col span={12}>
              <Statistic title="年代" value={2005} suffix="年" />
            </Col>
            <Col span={12}>
              <Statistic title="绿化率" value={35} suffix="%"/>
            </Col>
            <Col span={12}>
              <Statistic title="车位比" value={0.33}  />
            </Col>
          </Row>`
        </div>
        
      </div> :''}
     
    </div>
  );
}
export default Option;